<!-- 首页 -->
<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="head">
          <p class="heap_p1">借出</p>
          <Flag style="width: 50px; height: 50px; float: right;margin-right: 20px;margin-top: -30px;color: crimson;" />
          <p class="heap_p2">2023/1/31-2022/5/31</p>
          <p class="heap_p3"><a>1865700</a><a style="font-size: 20px;color: #000;">本</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head">
          <p class="heap_p1">归还</p>
          <Briefcase
            style="width: 50px; height: 50px; float: right;margin-right: 20px;margin-top: -30px;color: rgb(238, 6, 114);" />
          <p class="heap_p2">2023/1/31-2022/5/31</p>
          <p class="heap_p3"><a>1200000</a><a style="font-size: 20px;color: #000;"> 本</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head">
          <p class="heap_p1">总收益</p>
          <ShoppingCartFull
            style="width: 50px; height: 50px; float: right;margin-right: 20px;margin-top: -30px;color: rgb(182, 211, 19);" />
          <p class="heap_p2">2023/1/31-2022/5/31</p>
          <p class="heap_p3"><a>16.66</a><a style="font-size: 20px;color: #000;"> 万元</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="head">
          <p class="heap_p1">图书总数量</p>
          <Histogram
            style="width: 50px; height: 50px; float: right;margin-right: 20px;margin-top: -30px;color: rgb(97, 20, 220);" />
          <p class="heap_p2">2023/1/31-2022/5/31</p>
          <p class="heap_p3"><a>8600000</a><a style="font-size: 20px;color: #000;"> 本</a></p>
        </div>
      </el-col>
    </el-row>
    <!-- 折线图 -->
    <div class="bottom">
      <Statistics :width="'100%'" :height="'500px'"></Statistics>
    </div>
  </div>
</template>
<script>
// 引用statistics.vue
import Statistics from "./statistics.vue";
export default {
  components: {
    // 声明组件
    Statistics
  }
}
</script>
<style lang="scss" scoped>
.head {
  height: 180px;
  background-color: rgb(249, 252, 252);
  margin: 20px;
}

.heap_p1 {
  font-size: 20px;
  margin-left: 30px;
  padding-top: 20px;
  font-weight: 500;
  color: #10dd4d;
}

.heap_p2 {
  font-size: 14px;
  margin-left: 30px;
  padding-top: 10px;
}

.heap_p3 {
  font-size: 40px;
  margin-left: 120px;
  padding-top: 20px;
  color: #f10814;
}

.bottom {
  background-color: rgb(249, 252, 252);
  margin: 20px;
  padding-top: 30px;
}
</style>